.tip {
  position: absolute;
  padding: $base-padding;
  border-radius: $base-border-radius;
  white-space: nowrap;
  z-index: $z-index-no-modal;
  pointer-events: none;
  animation: tip $tip-transition-in;
  @include common-dropdown;
  &.tip--fast, &.tip--fast:before, &.tip--fast:after {
    animation-duration: $base-duration;
  }
  &--hide.tip, &--hide.tip:before, &--hide.tip:after {
    transition: all $tip-transition-out;
    transition-property: color, border-color, background-color, box-shadow;
    color: transparent;
    background-color: transparent;
    border-color: transparent !important;
    box-shadow: none;
  }
  &:before, &:after {
    animation: tip $tip-transition-in;
    content: " ";
    width: 0;
    height: 0;
  }

  $arrow-size-small: 10px 8px;
  $arrow-size-large: 12px 9px;
  $arrow-offset-small: 10px;
  $arrow-offset-large: 11px;

  &.tip--bottom:after {
    @include position(absolute, - nth($arrow-size-small, 2) null null 50%);
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-small, background-color(), up); }
  }
  &.tip--top:after {
    @include position(absolute, 100% null null 50%);
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-small, background-color(), down); }
  }
  &.tip--top-left:after {
    @include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-small, background-color(), down); }
  }
  &.tip--left:after {
    @include position(absolute, 50% null null 100%);
    @include transform(translate(0, -50%));
    @include th { @include triangle($arrow-size-small, background-color(), right); }
  }
  &.tip--right:after {
    @include position(absolute, 50% null null (- nth($arrow-size-small, 2)));
    @include transform(translate(0, -50%));
    @include th { @include triangle($arrow-size-small, background-color(), left); }
  }

  &.tip--bottom:before {
    @include position(absolute, - nth($arrow-size-large, 2) null null 50%);
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-large, light-border-color(), up); }
  }
  &.tip--top:before {
    @include position(absolute, 100% null null 50%);
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-large, light-border-color(), down); }
  }
  &.tip--top-left:before {
    @include position(absolute, 100% null null calc(100% - #{$arrow-offset-small}));
    @include transform(translate(-50%, 0));
    @include th { @include triangle($arrow-size-large, light-border-color(), down); }
  }
  &.tip--left:before {
    @include position(absolute, 50% null null 100%);
    @include transform(translate(0, -50%));
    @include th { @include triangle($arrow-size-large, light-border-color(), right); }
  }
  &.tip--right:before {
    @include position(absolute, 50% null null (- nth($arrow-size-large, 2)));
    @include transform(translate(0, -50%));
    @include th { @include triangle($arrow-size-large, light-border-color(), left); }
  }
}

@keyframes tip {
  from { color: transparent; background-color: transparent; border-color: transparent; box-shadow: none; }
}
